<template>
    <view class="main">
        <LoadPage :show="show" />
        <Empty v-if="!dataList.length" />
        <view v-else class="item dispaly-center" v-for="item in dataList" :key="item"
            @click="$goUrl(`/subPackage/index/projectOrderDetail?id=${item.id}`)">
            <view class="cover">
                <image :src="item.image" mode="aspectFill" />
            </view>
            <view class="right">
                <view class="right-top dispaly-just-between">
                    <view class="title">{{ item.serviceName }}</view>
                    <view class="price">￥{{ item.money }}</view>
                </view>
                <view class="m">{{ item.specName }}</view>
                <view class="pro">
                    <nut-progress :percentage="item.per.toFixed(2)" />
                </view>
            </view>
        </view>
        <LoadMore :status="status" v-if="dataList.length" />
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { getZProjectList } from '@/api/apiList';
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
const dataList = ref([])
let queryTwo = reactive({
    pageNum: 1,
    pageSize: 8,
})

let status = ref('noMore')
let show = ref(true)
const getDataList = async () => {
    status.value = 'loading';
    const res = await getZProjectList(queryTwo)
    if (res.code == 200) {
        if (res.rows.length) {
            dataList.value = [...dataList.value, ...res.rows]
            status.value = 'noMore'
        } else {
            status.value = 'noMore'
        }
        show.value = false
    }
}

onLoad(() => {
    getDataList()
})

onReachBottom(() => {
    queryTwo.pageNum++
    getDataList()
})

onPullDownRefresh(async () => {
    uni.showLoading({
        title: '加载中',
        icon: 'none'
    })
    dataList.value = []
    queryTwo.pageNum = 1
    await getDataList()
    uni.stopPullDownRefresh()
    uni.hideLoading()
})

</script>
<style lang="scss" scoped>
.main {
    padding: 30rpx;

    .item:last-child {
        margin-bottom: 0;
    }

    .item {
        margin-bottom: 20rpx;
        background: #FFFFFF;
        border-radius: 12rpx;
        padding: 15rpx;

        .cover {
            margin-right: 20rpx;

            image {
                width: 150rpx;
                height: 150rpx;
                border-radius: 8rpx;
            }
        }

        .right {
            width: 100%;

            .m {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #555555;
                margin: 10rpx 0 20rpx 0;
            }

            .right-top {
                .title {
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: 500;
                    font-size: 32rpx;
                    color: #222222;
                }

                .price {
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: bold;
                    font-size: 22rpx;
                    color: #FB4E47;
                }
            }
        }
    }
}
</style>